<template>
  <div class="con">
    <!-- 头部文件222222 -->
    <top :f1="true" :f2="false"></top>
    <van-tabs class=".nav" v-model="active" @change="getImgList">
      <van-tab v-for="item in menuList" :key="item.id" :title="item.title">
      </van-tab>
    </van-tabs>
    <ul class="tab2">
      <li
        class="tab"
        v-for="items in imageMenuList"
        :key="items.id"
        @click="imgDetail(items.id)"
      >
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          lazy-load
          :src="items.img_url"
        />
        <!-- 半透明效果 -->
        <div class="tp">
          {{ items.title }}
          {{ items.content}}
        </div>
      </li>
    </ul>
    <!-- 底部文件 -->
    <bottom></bottom>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 定义一个空数组接收滚动导航
      menuList: [],
      id: 0,
      // active:0就是默认打开就是从第一个开始
      active: 0,
      //   定义一个图片接收空数组
      imageMenuList: []
    }
  },
  // 定义一个生命周期函数,一加载就执行
  created() {
    // 定义滚动导航方法
    this.getMenuList()
    //  定义图片列表数据
    this.imageList(0)
  },
  methods: {
    // 调用滚动导航方法
    async getMenuList() {
      const { data: res } = await this.axios.get('/api/getimgcategory')
      // $toast是vant中Toast 轻提示
      if (res.status !== 0) return this.$toast('获取数据失败')
      //  如果验证成功就导出 注意接口文档这个地方是message不是data
      res.message.unshift({
        title: '全部',
        id: 0
      })
      this.menuList = res.message
      console.log(res)
    },
    getImgList(index) {
      this.id = this.menuList[index].id
      this.imageList(this.id)
    },
    //  调用图片列表数据
    async imageList(id) {
      const { data: res } = await this.axios.get('/api/getimages/' + this.id)
      if (res.status !== 0) return this.$toast('获取图片失败')
      this.imageMenuList = res.message
      console.log(res)
    },
    imgDetail(id) {
      this.$router.push('/photo/Info/' + id)
    }
  }
}
</script>
<style scoped>
.con {
  padding-top: 40px;
}
.nav {
  /* Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。 */
  position: Fixed;
  /* 层级属性 z-index: n (+ 提高 - 降低) */
  z-index: 1;
}
.tab {
  width: 100%;
  margin: 10px 0;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
  min-height: 200px;
  position: relative;
}
.tab2 {
  margin: 0 10px;
}
.tp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  height: 75px;
  /* z-index: 1; */
  color: #ffffff;
  font-size: 12px;
  padding-top: 20px;
  overflow: hidden;
}
p {
  margin: 5px 0;
  font-size: 12px;
}
</style>
